<template>
  <div>
    <!--评分简介-->
    <div class="introduction">
       <div class="introduction-left">
          <div class="score">
             <span>4.9</span>
             <span>分</span>
             <span>很棒</span>
          </div>
         <div class="comment">36666条评论</div>
          <span>></span>
       </div>
       <div class="introduction-right">
         <div class="info">
           <span>景点简介</span>
         </div>
         <div class="comment">开放时间、贴士</div>
         <span>></span>
       </div>
    </div>
    <!--定位-->
    <div class="location">
      <span>!</span>
      <span>海南省三亚市吉阳区下洋田鹿回头广场公共码头</span>
      <span>></span>
    </div>
    <!--活动专区-->
    <div class="activtiesBox">
      <div class="activties border-bottom">
        <p>活动专区</p>
      </div>
      <div class="actTicket">
        <ul>
          <li class="ticketInfo border-bottom" @click="changeShow">
             <div class="ticketInfoLeft">
               <p>【双十一秒杀19.9元】三亚市区-天涯海角 单程船票(11.1-11.11使用)</p>
             </div>
             <div class="ticketInfoRight">
              <p>
                <span>￥2257</span>起
                <span > > </span>
              </p>
            </div>
          </li>
          <div class="ticketMore" v-show="moreShow" >
            <div class="ticketMoreLeft">
              <p>【双十一秒杀19.9元】三亚市区-天涯海角 单程船票(11.1-11.11使用)</p>
              <p>
                <span>
                  <img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png">
                </span>
                明日可定
              </p>
              <p>去哪儿直销</p>
            </div>
            <div class="ticketMoreRight">
                <p>￥100</p>
                <p @click="shop">预定</p>
            </div>
          </div>
          <!--第二条-->
          <li class="ticketInfo border-bottom" @click="changeShow1">
            <div class="ticketInfoLeft">
              <p>【双十一秒杀19.9元】三亚市区-天涯海角 单程船票(11.1-11.11使用)</p>
            </div>
            <div class="ticketInfoRight">
              <p>
                <span>￥2257</span>起
                <span> > </span>
              </p>
            </div>
          </li>
          <div class="ticketMore" v-show="moreShow1" >
            <div class="ticketMoreLeft">
              <p>【双十一秒杀19.9元】三亚市区-天涯海角 单程船票(11.1-11.11使用)</p>
              <p>
                <span>
                  <img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png">
                </span>
                明日可定
              </p>
              <p>去哪儿直销</p>
            </div>
            <div class="ticketMoreRight">
              <p>￥300</p>
              <p @click="shop">预定</p>
            </div>
          </div>
          <div class="ticketMore" v-show="moreShow1" >
            <div class="ticketMoreLeft">
              <p>【双十一秒杀19.9元】三亚市区-天涯海角 单程船票(11.1-11.11使用)</p>
              <p>
                <span>
                  <img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png">
                </span>
                明日可定
              </p>
              <p>去哪儿直销</p>
            </div>
            <div class="ticketMoreRight">
              <p>￥100</p>
              <p @click="shop">预定</p>
            </div>
          </div>
          <div class="ticketMore" v-show="moreShow1" >
            <div class="ticketMoreLeft">
              <p>【双十一秒杀19.9元】三亚市区-天涯海角 单程船票(11.1-11.11使用)</p>
              <p>
                <span>
                  <img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png">
                </span>
                明日可定
              </p>
              <p>去哪儿直销</p>
            </div>
            <div class="ticketMoreRight">
              <p>￥150</p>
              <p>预定</p>
            </div>
          </div>
          <li class="ticketInfo border-bottom" @click="changeShow2">
            <div class="ticketInfoLeft">
              <p>【双十一秒杀19.9元】三亚市区-天涯海角 单程船票(11.1-11.11使用)</p>
            </div>
            <div class="ticketInfoRight">
              <p>
                <span>￥2257</span>起
                <span> > </span>
              </p>
            </div>
          </li>
          <div class="ticketMore" v-show="moreShow2" >
            <div class="ticketMoreLeft">
              <p>【双十一秒杀19.9元】三亚市区-天涯海角 单程船票(11.1-11.11使用)</p>
              <p>
                <span>
                  <img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png">
                </span>
                明日可定
              </p>
              <p>去哪儿直销</p>
            </div>
            <div class="ticketMoreRight">
              <p>￥1320</p>
              <p @click="shop">预定</p>
            </div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>

  export default {
    name: 'DetailTicket' ,
    data () {
      return {
        //可axios 根据对应id，显示相关项
        moreShow: false,
        moreShow1: false,
        moreShow2: false
      }
    },
    methods: {
      changeShow () {
        this.moreShow = !this.moreShow;
      },
      changeShow1 () {
        this.moreShow1 = !this.moreShow1;
      },
      changeShow2 () {
        this.moreShow2 = !this.moreShow2;
      },
      shop () {
        this.$emit("change")
      }
    }

  }
</script>
<style scoped>

 .introduction {
   width:100%;
   height: 60px;
   overflow: hidden;
 }
 .introduction-left {
   position: relative;
   float: left;
   width: 50%;
   height: 60px;
   border: 1px solid #cccccc;
   box-sizing: border-box;
   overflow: hidden;
 }
 .introduction-left >span{
   position: absolute;
   right: 10px;
   top:0;
   line-height: 60px;
   font-size: 20px;
 }
 .introduction-right {
   position: relative;
   float: right;
   width: 50%;
   height: 60px;
   border: 1px solid #cccccc;
   box-sizing: border-box;
   overflow: hidden;
 }
 .introduction-right>span {
   position: absolute;
   right: 10px;
   top:0;
   line-height: 60px;
   font-size: 20px;
 }
 .score,.info {
   margin: 8px;
 }
  .info>span {
    font-size: 20px;
    color: black;
  }
  .score :nth-child(1){
    color:orangered;
    font-size: 20px;
    font-weight: bold;
  }
 .score :nth-child(2){
   color:orangered;
   font-size: 16px;
   margin-right: 5px;
   font-weight: bold;
 }
 .score :nth-child(3){
   color:orangered;
   font-size: 16px;
   font-weight: bold;
 }
  .comment {
    margin-left: 8px;
    font-size: 12px;
    color: #cccccc;
  }
  .location {
    width: 100%;
    height: 25px;
    background-color: green;
    position: relative;
    overflow: hidden;
  }
 .location span {
   display: inline-block;
   font-size: 10px;
   color: #cccccc;
   line-height: 25px;
 }
 .location span:first-child {
   margin: 0 5px;
 }
 .location span:last-child {
   position: absolute;
   right: 15px;
 }
 .activtiesBox {
   width: 100%;
   overflow: hidden;
 }
  .activties {
    margin: 5px;
    width: 100%;
    height: 18px;
    background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -20.5px no-repeat;
    background-size: 18px;
  }
  .activties p {
    margin-left: 20px;
    line-height: 18px;
    position: absolute;
  }
 .ticketInfo {
   width: 100%;
   height: 60px;
   background-color: green;
 }
 .ticketInfo .ticketInfoLeft {
   padding-top: 10px;
   width: 75%;
   height: 50px;
   background-color: orangered;
   float: left;
 }
 .ticketInfoLeft p{
   margin: 5px;
 }
 .ticketInfo .ticketInfoRight {
   float: right;
   width: 25%;
   margin-top: 24px;
   position: relative;
 }
 .ticketInfoRight p {
   font-size: 12px;
   color: #7e8c8d;
 }
 .ticketInfoRight p span {
   color: orangered;
   font-size: 16px;
 }
 .ticketInfoRight p span:last-child {
   position: absolute;
   color: black;
   right: 5px;
   margin-right: 5px;
 }
 .ticketMore {
   background-color: #7e8c8d;
   width: 100%;
   height: 100px;
 }
 .ticketMore .ticketMoreLeft {
   width: 75%;
   height: 100px;
   background-color: orange;
   float: left;

 }
 .ticketMoreLeft :nth-child(1) {
   font-size: 16px;
   color: red;
   margin-top: 5px;
   margin-left: 5px;

 }
 .ticketMoreLeft :nth-child(2) {
   margin-top: 20px;
   font-size: 10px;
   color: #333333;
 }
 .ticketMoreLeft :nth-child(2) span img {
   width: 10px;
   height: 10px;
 }
 .ticketMoreLeft :nth-child(3) {
   margin-top: 10px;
   margin-left: 10px;
   font-size: 10px;
   color: #333333;
 }
  .ticketMore .ticketMoreRight {
    width: 25%;
    height: 100px;
    background-color:yellow;
    float: right;
    text-align: center;

  }
 .ticketMoreRight :nth-child(1) {
   color: red;
   font-size: 18px;
   margin-top: 20px;
   margin-bottom: 5px;
 }
 .ticketMoreRight :nth-child(2) {
   width: 35px;
   height: 20px;
   line-height: 20px;
   padding: 5px 10px;
   background-color: red;
   border-radius: 3px;
   margin-left: 23px;
 }
</style>
